<template>
	<image src="/static/image/09.png" mode="widthFix" class="bg"></image>
	<u-navbar
	title="历史月收益"
	:autoBack="true"
	:background="{
	background:'#E40417'
	}"
	:border-bottom="false"
	titleSize="28rpx" titleColor="#fff"
	back-icon-color="#fff"
	/>
	
	<view class="container pl30 pr30">
				
		<view class="bgf r20 p30 mt20">
			<pop position="br"  ref="popE"> 
				<template #main>
					<view class="t-flex between mb30">
						<view class="f32 c3 bold">
							选择月份 <text class="f28">（{{date}}）</text>
						</view>
						<text class="iconfont icon-xiangyou1 c9 dev" :class="{'reverse':popE?.show}"></text>
					</view>
				</template>
				<template #content>
					<monthSelect v-model="date"></monthSelect>
				</template>
			</pop>
			
		
			<view class="t-flex">
				<view class="item">
					<view class="c9 f26">
						总收益
					</view>
					<view class="prc f32 mainC bold mt20">
						￥{{$str.money(rowdata.total_sy)}}
					</view>
				</view>
<!-- 				<view class="item">
					<view class="c9 f26">
						订单收益
					</view>
					<view class="prc mainC bold mt20">
						￥1214
					</view>
				</view>
				<view class="item">
					<view class="c9 f26">
						佣金收益
					</view>
					<view class="prc mainC bold mt20">
						￥1214
					</view>
				</view> -->
			</view>
		
		
			
		</view>
		
		
		<view class="log bgf r20 mt20" v-for="item in data" :key="item.id">
			<view class="mb10 " :class="item.type==1?'or':'ge'">
				{{item.type==1?'订单分佣':'订单收益'}}
			</view>
			<view class="t-flex between">
				<view class="f30 c3 bold">
						{{item.order_sn}}
				</view>
				<view class="bold mainC">
					￥{{item.price}}
				</view>
			</view>
			
			<view class="f24 c9 mt10">
				{{item.nickname}}（{{item.mobile}}）/{{item.car_type}}（1小时）
			</view>
		</view>
		
		<empty msg='本月暂无记录' v-if="!data.length"></empty>
		<view class="bpad"></view>
		
		
	</view>
	
	
	
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue';
	import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
	import { sfShouyi } from '../../../api';
	import { getTime, usePaging } from '../../../lib/ts/util';
	
	const popE = ref()
	let date = ref('')
	date.value = getTime(+new Date()/1000,6)

		
		
	let statistics = ref()
	let {
		data,
		reload,
		getMore,
		rowdata
	} = usePaging('/api/master/GetSfList',{key:'info'})
	
	onLoad(()=>{
		getdata()
		reload({
			month:date.value,
		})
	})
	onPullDownRefresh(()=>{
		date.value = getTime(+new Date()/1000,6)
		getdata()
		reload({
			month:date.value,
		})
	})
	onReachBottom(()=>{
		getMore({
			month:date.value,
		})
	})
	
	watch(date,()=>{
		reload({
			month:date.value,
		})
	})
	
	const getdata = async ()=>{
		statistics.value = await sfShouyi()
	}
		
	

</script>

<style scoped lang="scss">
	.bg{
		width: 100%;
		position: fixed;
	}
	
	.container{
		position: relative;
		z-index: 2;
	}
	
	
	.log{
		padding: 26rpx 30rpx;
	}
	
	.item{
		width: 33%;
		.prc{
			&::first-letter{
				font-size: 26rpx;
			}
		}
	}
	
	.dev{
		transform: rotate(.25turn);
		transition: all 200ms;
	}
	.dev.reverse{
		transform: rotate(.75turn);
	}
	.ge{
		color: #16D46B;
	}
	.or{
		color: orange;
	}
</style>
